<template>
	<view class="wrap">
		<!-- <image class="bg-set" src="/static/app/1.jpg"></image> -->
		<view class="intro">
			<image src="/static/app/logo.png"></image>
			<view class="text-lg padding">
				<text class="text-black text-bold">江苏省曲塘高级中学校友会</text>
				<!-- <image src="/static/opts/logo.png" mode="aspectFit"></image> -->
			</view>
			<view class="tips">
				岁月留痕，友谊永存
				<br>
				在曲中遇见美好
			</view>
		</view>
		<view class="login_wrap">
			<!-- #ifdef H5 -->
			<button type="primary" size="default" class="login-btn" @tap="login">
				登录
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="phone" class="padding">
				<view class="padding-bottom-xl text-xl text-center">
					<text class="text-black text-bold">手机号{{phone}}登录</text>
				</view>
				<button type="primary" class="cu-btn login-btn round lg" @click="login">
					登录
				</button>
			</view>
			<button v-else type="primary" size="default" class="login-btn" lang="zh_CN" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">
				手机号一键登录
			</button>
			<!-- #endif -->
		</view>
		<!-- <s-footer class="login-footer" /> -->
	</view>
</template>

<script>
	import {
		login_wxmp,
		login
	} from '@/common/api/auth.js'
	import {
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				// bgImg: '/static/app/1.jpg' //'~@/static/app/1.jpg'
				disabled: false,
				phone: ""
			}
		},
		methods: {
			...mapMutations(['SET_USERINFO']),
			getPhoneNumber(PhoneNumber) {
				console.log("PhoneNumber", PhoneNumber)
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log("uni.login", loginRes)
						login_wxmp({
							loginCode: loginRes.code,
							phoneCode: PhoneNumber.detail.code
						}).then(res => {
							let data = this.$s.res(res)
							uni.setStorageSync('jwt', data['jwt'])
							uni.setStorageSync("userInfo", data)
							uni.redirectTo({
								url: '/pages/index'
							})
						})
					}
				})
			},
			login() {
				login({
					account: this.phone,
					// account: "13915138819",
					password: "123456"
				}).then(res => {
					let data = this.$s.res(res)
					uni.setStorageSync('jwt', data['jwt'])
					uni.setStorageSync("userInfo", data)
					uni.redirectTo({
						url: '/pages/index'
					})
				})
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync("userInfo")
			if (userInfo && userInfo.phone) {
				this.phone = userInfo.phone
				this.disabled = true
			}
		}
	}
</script>

<style>
	/* page {
		background-image: url('~@/static/app/1.jpg');
		background-size: 100% 100%;
	} */
</style>
<style lang="scss" scoped>
	.bg-set {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.intro {
		width: 100%;
		height: 54vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: $font-size-base;
		color: $text-color-assist;

		image {
			width: 165rpx;
			height: 165rpx;
		}

		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}

	.login_wrap {
		// height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;

		.login-btn {
			background-color: $theme-color;
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;

			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.login-footer {
		position: absolute;
		width: 100%;
		bottom: 0;
		text-align: center;
	}
</style>